<template>
  <div class="carbonOverview">
    <!-- 资产结构 -->
    <a-row class="Structure_box">
      <a-col :md="16" class="Structure_box_left">
        <div class="tltle">碳市场行情</div>
        <div id="line" style="width: 100%; height: 400px"></div>
      </a-col>
      <a-col :md="7" :offset="1" class="Structure_box_right">
        <div class="tltle">碳交易量</div>
        <div>
          <EchartsPie
            :data="amount"
            :widthProp="width"
            :heightProp="height"
          ></EchartsPie>
        </div>
        <div class="tltle">碳交易额</div>
        <div>
          <EchartsPie
            :id="id"
            :data="volumn"
            :widthProp="width"
            :heightProp="height"
          ></EchartsPie>
        </div>
      </a-col>
    </a-row>
    <!-- 累计配额资产净值 -->
    <a-row class="Cumulative_quota">
      <!-- 求购信息 -->
      <a-col :md="12" class="module">
        <div class="top">
          <div class="title">求购信息</div>
        </div>

        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          rowKey="id"
          :columns="columns1"
          :loading="loading"
          :dataSource="dataSource"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
        </a-table>
      </a-col>
      <a-col :md="12" class="module">
        <div class="top">
          <div class="title">出售信息</div>
        </div>

        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          rowKey="id"
          :columns="columns1"
          :dataSource="dataSource"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
        </a-table>
      </a-col>
    </a-row>
    <Message></Message>
  </div>
</template>

<script>
import { getPricesTrend } from "@/api/api.js";
import { makertCharts } from "@/api/assets.js";
// import Bar from '@/components/chart/Bar'
// import Pie from '@/components/chart/Pie'
import EchartsPie from "@/components/Tools/EchartsPie";
import EchartsLine from "@/components/Tools/EchartsLine";
import Message from "@/components/Assets/Market/message";
// import LineChartMultid from '@/components/chart/LineChartMultid'
export default {
  name: "Market",
  components: {
    EchartsPie,
    EchartsLine,
Message
  },
  data() {
    return {
      marketData: null,
      carbonPriceData: null,
      height: "200px",
      width: "100%",
      id: "main3",
      // 交易量
      amount: [],
      // 交易额
      volumn: [],
      idx: 2,
      dataSource: [
        {
          type: "CCER",
          kind: "青光伏000",
          num: "20000吨",
          price: "6000000元",
        },
        {
          type: "CCER",
          kind: "水电000",
          num: "260吨",
          price: "1271545元",
        },
        {
          type: "CCER",
          kind: "云风电",
          num: "940吨",
          price: "300000元",
        },
        {
          type: "CCER",
          kind: "青光伏000",
          num: "3247吨",
          price: "1350000元",
        },
      ],
      description: "统计页面",
      columns: [
        {
          title: "交易类型",

          dataIndex: "type",
        },
        {
          title: "交易品种",

          dataIndex: "kind",
        },
        {
          title: "交易数量",

          dataIndex: "num",
        },
        {
          title: "交易价格",

          dataIndex: "price",
        },
      ],
      columns1: [
        {
          title: "交易类型",

          dataIndex: "type",
        },
        {
          title: "交易品种",

          dataIndex: "kind",
        },
        {
          title: "交易数量",

          dataIndex: "num",
        },
        {
          title: "交易价格",

          dataIndex: "price",
        },
      ],
    };
  },
  created() {
    var param = {
      endDate: "2023-06-06",
      startDate: "2023-04-17",
    };
    makertCharts(param).then((res) => {
      //   console.log(res);
      this.marketData = res.result;
      var series = [];
      var datesLen = this.marketData.charts.date.length;
      var pieDataLen = this.marketData.exchange.length;
      for (var i = 0; i < datesLen; i++) {
        series.push({
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },
          connectNulls: true,
          name: this.marketData.charts.variety[i],
          type: "line",
          data: this.marketData.charts.data[i],
          smooth: true,
          smoothMonotone: "x",
          //   stack: "Total",
        });
      }
      let amount = [];
      let volumn = [];
      for (var i = 0; i < pieDataLen; i++) {
        amount.push({
          value: this.marketData.exchange[i].amount,
          name: this.marketData.exchange[i].region,
        });
        volumn.push({
          value: this.marketData.exchange[i].volumn,
          name: this.marketData.exchange[i].region,
        });
      }
      this.amount = amount;
      this.volumn = volumn;
      //   console.log(this.amount, this.volumn);
      this.drawLine(series);
    });
  },
  mounted() {},
  methods: {
    drawLine(series) {
      let myChart = this.$echarts.init(document.getElementById("line"));
      var option = {
        title: {
          show: false, //是否显示
          text: "碳价格趋势",
          textStyle: {
            color: "#333",
            fontWeight: "bold",
            fontSize: 14,
          },
          padding: 20,
          left: 10,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: this.marketData.charts.variety,
          x: "right",
        },
        grid: {
          top: "40px",
          left: "20px",
          right: "40px",
          bottom: "20px",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.marketData.charts.date,
          splitLine: {
            //去除网格线
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#f4f6fa",
              width: 2,
              type: "solid",
            },
          },
          axisLabel: {
            show: true,
            lineStyle: {
              color: "#f00", //更改坐标轴颜色
            },

            textStyle: {
              color: "#999", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            lineStyle: {
              color: "#ccc", //更改坐标轴颜色
            },
            textStyle: {
              color: "#999", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f4f6fa",
              width: 2,
              type: "solid",
            },
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: "#f6f8fb",
              width: 1,
              type: "dashed", //dotted：虚线 solid:实线
            },
          },
        },
        series: series,
      };
      myChart.setOption(option);
    },
    handleTableChange() {},
    onClick() {},
    changeActiveIdx(idx) {
      this.idx = idx;
    },
  },
};
</script>

<style lang="scss" scoped>
.carbonOverview {
  background: #fff;
  padding: 20px;
  background-size: cover;
  .tltle {
    font-size: 16px;
    text-align: left;
    padding: 4px 10px;
  }
  .Structure_box {
    .Structure_box_left {
      border-radius: 6px;
      // background: url("@/assets/img/assets/bg_1.png") no-repeat;
      .back_img {
        padding: 0 10px;
        border-radius: 16px;
        .bg2_box {
          background: #eaf6f8;
          border-radius: 16px;

          .bg2 {
            background: url("@/assets/img/assets/bg_2.png");
            background-size: 100% 100%;
            min-height: 80px;
            padding: 10px;
            border-radius: 16px;
            z-index: 99;
          }
        }
        .bg3_box {
          background: #f1f2fc;
          border-radius: 16px;
          .bg3 {
            background: url("@/assets/img/assets/bg_3.png");
            background-size: 100% 100%;
            min-height: 80px;
            border-radius: 16px;
            padding: 10px;
          }
        }
      }

      .Structure {
        padding: 10px;
        min-height: 80px;
        border-radius: 16px;

        .title {
          font-size: 12px;
        }
        .h4 {
          font-size: 16px;
        }
        .val {
          margin-top: 6px;
          font-size: 12px;
        }
        .anticon {
          margin-right: 6px;
        }
      }
      .backa {
        border-radius: 16px;
        padding: 0px 10px;
      }
      .back {
        min-height: 80px;
        background: rgba(233, 237, 241, 0.2);
        border-radius: 16px;
        padding: 10px;
      }
    }
    .Structure_box_right {
    }
  }
  .Cumulative_quota {
    .module {
      margin-bottom: 30px;
      padding: 0 5px;
      padding-top: 20px;
      border-top: 1px dashed #ccc;
    }
    .top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .title {
        font-size: 14px;
      }
      .Conditions {
        display: flex;
      }
    }
    .module_one {
      background: rgba(251, 252, 253, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 10px;
      padding: 10px 0;
      margin-bottom: 10px;

      .title {
        font-size: 12px;
      }
      .h4 {
        font-size: 16px;
      }
      .val {
        font-size: 22px;
      }
      .anticon {
        margin-right: 6px;
      }
    }
    .tab {
      display: flex;
      margin: 10px 0;
      flex-direction: row;
      padding: 0;
      li {
        list-style: none;
        padding: 6px 14px;
        font-size: 12px;
        margin-right: 6px;
        // background: #0c67ee;
        border-radius: 20px;
        color: #333;
        cursor: pointer;
      }
    }
  }
  .flex_ {
    display: flex;
    width: fit-content;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    .title {
      color: #999;
      margin-right: 10px;
    }
    .select {
      color: #000;
      margin-right: 4px;
    }
    i {
      color: #000;
    }
  }
}
.active {
  list-style: none;
  padding: 6px 14px;
  font-size: 12px;
  margin-right: 6px;
  background: #0c67ee;
  border-radius: 20px;
  color: #fff !important;
}
</style>